// 7月23号------------------------7月23号------------------------
// store\index.js导入了这里的方法,并且爆出出去了
// 导入路由里面定义的模块(方法),constantRoutes(静态路由) linlin(动态路由)
import router, { constantRoutes, linlin } from '../../router/index.js'

// state数据
const state = () => {
  return {
    allRoutes: constantRoutes // 设置默认路由(静态的)
  }
}
// mutations修改数据的方法,同步
const mutations = {
  setRoutes(state, newRoutes) {
    state.allRoutes = newRoutes
  }
}
// actions修改数据的方法,异步
const actions = {
  // filterRoutes就是取过滤,去筛选路由信息
  // filterRoutes(context,"")第二个参数是,如果你想传参数,就可以传递进来
  // 现在是不需要传的,因为vuex仓库中是有这个信息的(在控制台的uesr/setUserInfo打开后,点击vuex里面的user/userInfo/roles/menus里面有"employees""setting""permissions"...)
  //
  filterRoutes(context) {
    // 月23号------------------------月23号------------------------
    // 111,先获取到用户可以访问的 menus(就是能访问哪些页面的路由信息)
    // 和动态的路由去比较,然后得出结果,
    // 方法在veux Module里面 https://vuex.vuejs.org/zh/guide/
    // vuex Module 里面定义的方法 对于模块内部的 action，局部状态通过 context.state 暴露出来，根节点状态则为 context.rootState：
    // 所以通过context.rootState去获取到用的信息的 menus
    // console.log('rootState', context.rootState.user.userInfo.roles.menus) // 打印出来能获取到menus里面的所有信息
    const _menus = context.rootState.user.userInfo.roles.menus
    // 222,
    // 拿到menus这个数据后,就去比较哪些是可以访问的,哪些是不可以访问的
    // 然后要比较的是动态路由(src\router\index.js)里面的linlin这个路由数组
    // 然后是需要比较linlin里面的name.但是要注意哦name是放在children里面的
    // ----------------------------------------------------------------------
    // 重点重点,menus这个数组里面去和,linlin这个动态路由里面的name去比较(比较menus数据和name是相等的,就说明可以访问这个页面,反之就不可以)
    const _newRoutes = linlin.filter(v => {
      // v.children=v.children.filte,前面的v.children(就是保存筛选出来linlin里面的children,然后再赋值当前页面的children)
      // filter过滤,v.children就是筛选出来的每一项
      // 然后再拿到v.children的每一项再次,去筛选出来里面的name
      // v.children = v.children.filter(child => {
      //   // includes查找是否有这个值,有就返回true,(所以过滤出来的child.name如果有这个值,就暗返回)
      //   return _menus.includes(child.name)
      // })
      // 7月24号----------下面--------------7月24号---------------------------------------
      // 7月24号----------下面--------------7月24号---------------------------------------
      // bugbugbug分析,权限少的用户登录之后`退出`,用权限多的用户`登录`,左侧的菜单少了很多(只能看到上一个用户看到的菜单)
      // 在筛选的时候就改动过这个动态路由的数据,因为筛选的name是在children里面,然后再外层的children是一个对象,对象是复制类型,
      // 所以同过v.children去改的时候(因为它是引用类型,然后就把,src/router/index.js里面的动态路由信息也改了)
      // 所以才会这样的bug,因为比如权限少的用户在筛选的时候已经把很多的,children都过滤出去了,
      // 这样就等于是 src/router/index.js里面的动态路由信息也过滤出去了,
      // 直接赋值会更改,引用地址对应的数据,,,所以那就赋值了
      // 因为值需要知道这句代码执行的结果是不是大于0,
      // 下面代码的修改,随便做了筛选,但是并没有赋值给v.children,那就不会修改src/router/index.js动态路由的信息了
      const _length = v.children.filter(child => {
        return _menus.includes(child.name)
      }).length
      // 7月24号---------上面---------------7月24号---------------------------------------
      // 7月24号---------上面---------------7月24号---------------------------------------
      // 代码执行到这里,说明两次筛选完成了(得到了筛选后的值)
      // 然后判断如果children长度为0(说明当前这个路由信息里面,没有任何一个页面满足可以访问的路由地址)
      // 当长度不为0,说明里面有满足可以访问的路由地址,(就说明menus这个数组里面有能访问的路由数据地址)
      // 代码到这里为止,还是内层循环,但是最终需要筛选的是外层的linlin这个数组
      // 所以根据返回的true或者false,外面这个linlin的数组就出来了
      // 这就筛选出来了一个新数组
      if (_length > 0) {
        return true
      } else {
        return false
      }
    })
    // 7月23号------------------------7月23号------------------------
    // 保证通配的404页面是在最后面(分析写在src\router\index.js里面了)
    // 这样做的目的就是让动态路由里面也有404页面
    _newRoutes.push({ path: '*', redirect: '/404', hidden: true })
    // 打印出来的就是menus数组里面的数据,和linlin这个动态路由里面的name是相等(一个路由地址)
    // 相等就说明可以访问该路由地址了
    // 通过换不同权限的账号,就能明显的看到这里打开的信息,(方便理解)
    // console.log('_newRoutes', _newRoutes)
    // 333,拿到这个筛选的新数组后,addRoutes 动态添加
    router.addRoutes(_newRoutes)
    // 444,合并到vuex默认的数组中(合并,并赋值)
    // 注意筛选出来的路由地址也需要添加,静态路由地址也需要添加(因为静态的一直都需要用)
    // 动态新生成的路由也需要添加
    context.commit('setRoutes', [...constantRoutes, ..._newRoutes])
  }
}

export default {
  namespaced: true, // 开启命名空间
  state,
  mutations,
  actions
}
